<template>
  <div>
<p>分类展示页面</p>
  <table style="margin: 0 auto; width:50%">
    <tr>
      <td>编号</td>
      <td>分类名</td>
      <td>操作</td>
    </tr>
    <tr v-for="i in showcate" :key="i.id">
      <td>{{i.id}}</td>
      <td><router-link :to="{path:'/showbooks01',query:{'cid':i.id}}">{{i.name}}</router-link></td>
      <td>
        <router-link :to="{path:'/upcate01',query:{'cid':i.id}}"><button>修改</button></router-link>
        <button @click="delcate(i.id)">删除</button>
      </td>
    </tr>
  </table>

  <p>
    <button @click="up_page">上一页</button>
    <button v-for="i in page_list" :key="i" @click="get_page(i)">{{i}}</button>
    <button @click="down_page">下一页</button>
  </p>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
          pid:1,
          showcate:[],
          page_list:[],
          page_sum:0,
        }
    },
    methods: {
      down_page(){
        if(this.pid<this.page_sum){
          this.pid+=1
          this.show_cate()
        }else{

        }
      },
      up_page(){
        if(this.pid == 1){

        }else{
          this.pid -= 1
          this.show_cate()
        }
      },
      get_page(i){
        this.pid = i
        this.show_cate()
      },
      // 删除分类
      delcate(cid) {
        axios({
          url:'http://127.0.0.1:8000/app01/delcate/'+cid,
          method:'delete'
        }).then(resp=>{
          console.log(resp.data)
          if(resp.data.code==200){
            this.show_cate()
          }
        })
      },
      // 展示页面
      show_cate(){
        axios({
          url:'http://127.0.0.1:8000/app01/showcate/'+this.pid,
          method:'get'
        }).then(resp=>{
          console.log(resp.data)
          this.showcate=resp.data.data
          this.page_list=resp.data.page_list
          this.page_sum=resp.data.page_sum
        })
      }
    },
    created() {
      this.show_cate()
    }
}
</script>

<style>

</style>